<template>
  <div class="credits">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="">
        <el-input v-model="queryParams.name" placeholder="姓名" clearable style="width: 100px" />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="queryParams.phone" placeholder="手机号" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item label="" prop="jobGroup">
        <el-select v-model="queryParams.type" placeholder="担保类型" clearable style="width: 120px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="jobGroup" v-if="active == 1">
        <el-select v-model="queryParams.status" placeholder="状态" clearable style="width: 100px">
          <!-- <el-option v-for="dict in sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-date-picker v-model="queryParams.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 260px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"> 搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain @click="handleExport" v-hasPermi="['monitor:job:export']"
          ><el-icon><Upload /></el-icon> 导出</el-button
        >
      </el-col>
    </el-row> -->

    <el-table v-loading="loading" :data="state.list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="担保编号" align="center" prop="id" :show-overflow-tooltip="true" />
      <el-table-column label="姓名" align="center" prop="user_name" :show-overflow-tooltip="true" />
      <el-table-column label="申请日期" align="center" prop="create_time" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="手机号" align="center" prop="user_phone" :show-overflow-tooltip="true" />
      <el-table-column label="申请额度" align="center" prop="apply_quota" :show-overflow-tooltip="true"
        ><template #default="scope">
          <div>{{ scope.row.apply_quota }}元</div>
        </template></el-table-column
      >
      <el-table-column label="还款方式" align="center" prop="method" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ methodType(scope.row.method) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="担保期限" align="center" prop="loan_stages" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.loan_stages }}个月</div>
        </template></el-table-column
      >
      <el-table-column label="担保类型" align="center" prop="loan_type" :show-overflow-tooltip="true">
        <template #default="scope" v-if="active != 3">
          <div>{{ loanTypes(scope.row.loan_type) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="审批金额" align="center" prop="approval_amount" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.approval_amount == "" ? scope.row.apply_quota : scope.row.approval_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope" v-if="active != 3">
          <div>{{ statusType(scope.row.status) }}</div>
          <el-link type="primary" @click="lookover(scope.row)">审核详情</el-link>
        </template>
      </el-table-column>
      <el-table-column label="初审" align="center" prop="first_audit_account" :show-overflow-tooltip="true" />
      <el-table-column label="复审" align="center" prop="reexamine_account" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="终审" align="center" prop="final_audit_account" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="50" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="查看" placement="top">
            <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="handleClick" />
    <!-- 预览界面 -->
    <el-dialog :title="preview.title" v-model="preview.open" width="65%" top="100vh" append-to-body class="scrollbar">
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column align="center" prop="audit_time" label="审核时间" />
        <el-table-column align="center" prop="type" label="状态">
          <template #default="scope">
            <div>{{ handelType(scope.row.type) }}</div>
          </template></el-table-column
        >
        <el-table-column align="center" prop="account_name" label="审核人员" />
        <el-table-column align="center" prop="status" label="审核结果">
          <template #default="scope">
            <div>{{ DialogStatus(scope.row.status) }}</div>
          </template></el-table-column
        >
        <el-table-column align="center" prop="details" label="反馈详情" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="Job">
import { loanFinalAuditList, getLoanFinalAudit } from "@/api/loanBefore";
import { statusType, loanTypes, methodType } from "@/utils/dict";
import Crontab from "@/components/Crontab";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { onMounted } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
import { formatDate } from "@/utils/index.js";
const state = reactive({
  list: [],
});
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const value2 = ref("");
const props = defineProps({
  active: {
    type: String,
  },
});
const data = reactive({
  form: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    name: "", //姓名
    phone: "", //电话
    status: "", //状态
    type: "", //类型
    time: "", //时间
    startTime: "", //开始时间
    endTime: "", //结束时间
  },
  preview: {
    open: false,
    title: "审核详情",
    data: {},
    activeName: "domain.java",
  },
  tableData: [],
});

const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
});

const { queryParams, form, rules, preview } = toRefs(data);

const options = [
  {
    value: "1",
    label: "个人信用",
  },
  {
    value: "2",
    label: "个人分期",
  },
  {
    value: "3",
    label: "个人抵押",
  },
  {
    value: "4",
    label: "企业信用",
  },
  {
    value: "5",
    label: "企业分期",
  },
  {
    value: "6",
    label: "企业租赁",
  },
];

/** 查询列表 */
function getList(status, form) {
  loading.value = true;
  loanFinalAuditList(status, form).then((res) => {
    console.log(res, "列表");
    if (res.code == 200) {
      state.list = res.data.list;
      total.value = res.data.total_page;
      loading.value = false;
      queryParams.value.startTime = "";
      queryParams.value.endTime = "";
    }
  });
}
onMounted(() => {
  switch (props.active) {
    case "0":
      getList(props.active, queryParams.value);
      break;
    case "1":
      getList(props.active, queryParams.value);
      break;
    case "2":
      getList(props.active, queryParams.value);
      break;
    case "3":
      getList(props.active, queryParams.value);
      break;
  }
});

//状态转译
function auditStatus(status) {
  switch (status) {
    case 1:
      return "初审通过";
    case 2:
      return "复审通过";
    case 3:
      return "复审驳回";
    case 4:
      return "复审终止";
    case 5:
      return "终审通过";
    case 6:
      return "终审驳回";
    case 7:
      return "终审终止";
    case 8:
      return "放款审批";
    case 9:
      return "放款处理";
    case 10:
      return "已放款";
  }
}

//弹窗审核类型转译
function handelType(status) {
  switch (status) {
    case 1:
      return "初审";
    case 2:
      return "复审";
    case 3:
      return "终审";
  }
}
//弹窗审核结果转译
function DialogStatus(status) {
  switch (status) {
    case 1:
      return "通过";
    case 2:
      return "驳回";
    case 3:
      return "拒绝";
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  const reg = new RegExp("^1[3456789]\\d{9}$");
  if (!reg.test(queryParams.value.phone) && queryParams.value.phone != "") {
    return ElMessage({
      message: "请输入正确手机号码",
      type: "warning",
    });
  }
  if (queryParams.value.time && queryParams.value.time.length > 0) {
    queryParams.value.startTime = formatDate(queryParams.value.time[0]);
    queryParams.value.endTime = formatDate(queryParams.value.time[1]);
  }
  queryParams.value.page_count = 1;
  getList(props.active, queryParams.value);
}

function handleClick(val) {
  console.log(val, "valvalvalv");
  queryParams.value.page_count = val.page;
  queryParams.value.page_size = val.limit;
  getList(props.active, queryParams.value);
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
function lookover(e) {
  preview.value.open = true;
  console.log(e, "e");
  getLoanFinalAudit(e.id).then((res) => {
    console.log(res, "复审详情");
    if (res.code == 200) {
      data.tableData = res.data;
    }
  });
}

/** 任务详细信息 */
function handleView(row) {
  router.push({
    path: "detailpage",
    query: {
      state: JSON.stringify(row),
      type: "3",
    },
  });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "monitor/job/export",
    {
      ...queryParams.value,
    },
    `job_${new Date().getTime()}.xlsx`
  );
}
</script>
<style lang="scss" scoped>
.statusStyle {
  color: #ff0000;
}
:deep(.el-dialog) {
  height: 100px;
}
.pagination-container {
  height: 56px;
  margin-top: 15px;
}
</style>
